<template>
    <div class="eventReview">
      <div ref="chart" class="b_echarts"></div>
      <div class="b_label" v-show="disappear">
        <el-row class="main-el-row-header">
          <el-row class="header-title">
            <el-col :span="24">{{ title }}</el-col>
          </el-row>
        </el-row>
        <el-row class="main-el-row-content">
          <el-table
            :data="showData"
            style="width: 100%"
            class="my-table"
            :header-cell-style="{ color: '#84F2FF' }"
            :cell-style="{ color: '#84F2FF' }"
          >
            <div v-if="mondata == '地磁暴'">
              <!-- 地磁暴  -->
              <el-table-column
                prop="sn"
                width="155px"
                label="编号"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="thresholddate"
                label="阈值时间"
                width="160px"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="beginTime" label="开始时间" align="center">
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间" align="center">
              </el-table-column>
              <el-table-column prop="kpMax" label="最大Kp指数" align="center">
              </el-table-column>
              <el-table-column prop="apMax" label="最大Ap指数" align="center">
              </el-table-column>
              <el-table-column prop="dstMin" label="最小Dst指数" align="center">
              </el-table-column>
              <el-table-column prop="class1" label="等级" align="center">
              </el-table-column>
            </div>
            <div v-if="mondata == '高能电子暴'">
              <!-- 高能电子暴 -->
              <el-table-column
                prop="sn"
                label="编号"
                width="155px"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="beginDay" label="开始时间" align="center">
              </el-table-column>
              <el-table-column prop="endDay" label="结束时间" align="center">
              </el-table-column>
              <el-table-column prop="class1" label="等级" align="center">
              </el-table-column>
              <el-table-column
                prop="fluenceMax"
                label="最大日积分通量"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="maxDay"
                label="最大日积分通量日期"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="relatedGms"
                width="155px"
                label="关联地磁暴"
                align="center"
              >
              </el-table-column>
            </div>
            <div v-if="mondata == '质子事件'">
              <!-- 质子事件 -->
              <el-table-column prop="sn" label="编号" align="center">
              </el-table-column>
              <el-table-column
                prop="thresholddate"
                width="160px"
                label="阈值时间"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="class1" label="等级" align="center">
              </el-table-column>
              <el-table-column
                prop="maxTimeP10"
                label="P10峰值时刻"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="maxP10" label="P10峰值流量" align="center">
              </el-table-column>
              <el-table-column prop="flunenceP10" label="P10积分" align="center">
              </el-table-column>
              <!-- <el-table-column prop="relatedSxr" label="关联耀斑" align="center">
              </el-table-column>
              <el-table-column prop="relatedAr" label="关联活动区" align="center">
              </el-table-column> -->
            </div>
            <div v-if="mondata == 'X射线耀斑'"> <!-- X射线耀斑 -->
              <el-table-column prop="sn" label="编号" align="center">
              </el-table-column>
              <el-table-column
                prop="thresholddate"
                label="阈值时间"
                width="160px"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="beginTime" label="开始时间" align="center">
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间" align="center">
              </el-table-column>
              <el-table-column prop="maxTime" label="峰值时刻" align="center">
              </el-table-column>
              <el-table-column prop="grade" label="级别" align="center">
              </el-table-column>
              <el-table-column prop="class1" label="等级" align="center">
              </el-table-column>
            </div>
  
            <!-- <el-table-column  label="操作" align="center">
              <template slot-scope="scope">
                  &lt;!&ndash;<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>&ndash;&gt;
                  <el-button type="text" @click="editSource(scope.row.pubDayhhmm,'edit')" size="small">编辑</el-button>
                  <el-button type="text" style="color:#FE2E64;" @click="editSource(scope.row.pubDayhhmm,'del')" size="small">删除</el-button>
              </template>
          </el-table-column>-->
          </el-table>
          <div class="div-el-pagination" v-show="pageFlag">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              background
              layout="prev, pager, next, total, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-row>
      </div>
    </div>
  </template>
  
  <script>
  import { get, post } from "../../utils/request";
  export default {
    name: "eventReview",
    components: {},
    data() {
      return {
        getlinks: [],
        getnodes: [],
        form: {
          date1: "",
          date2: "",
        },
        total: 0,
        pageFlag: true,
        pageSize: 5,
        currentPage: 1,
        showData: [],
        currentTime: "", // 当前时间
        title: "",
        disappear: false,
        rouapi: "", // 用来存放请求地址的
        mondata:"", // 用来存放当前点击节点的所对应table 的名字 
      };
    },
    created() {},
    mounted() {
      this.getdata();
    },
    methods: {
      getdata() {
        get("/api/idatamanage/search/knowledgeGraph")
          .then((result) => {
            console.log("接口请求成功的回调", result);
            this.getlinks = result.data.data.links;
            this.getnodes = result.data.data.nodes;
            // this.getlinks.forEach((value) => {
            //   value["lineStyle"] = { curveness: 0.2 };
            // });
            
            this.getEchartData();
          })
          .catch((err) => {
            console.log("接口请求失败", err);
          });
      },
      // echarts 图表
      getEchartData() {
        var chartDom = this.$refs.chart;
        var myChart = this.$echarts.init(chartDom);
        var option = {
          title: {
            text: "",
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: "quinticInOut",
          series: [
            {
              type: "graph",
              layout: "none",
              symbolSize: 50,
              roam: true,
              label: {
                show: true,
                color: '#ffffff',
              },
              edgeSymbol: ["circle", "arrow"],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                fontSize: 20,
              },
              categories: [0, 1, 2],
              data: this.getnodes,
              // links: [],
              links: this.getlinks,
              lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0.1,
              },
            },
          ],
        };
        option && myChart.setOption(option);
        myChart.on("click", (params) => {
          // console.log(params.data.name);
          this.title = params.data.name;
          this.init(params.data.name);
        });
      },
      init(flag) {
        console.log(flag)
        //调用获取数据接口
        if (flag == "高能电子暴") {
          this.rouapi = "/dataFeature/queryEeFeatures";
          this.mondata = "高能电子暴"
          this.disappear = true;
        } else if (flag == "地磁暴") {
          this.rouapi = "/dataFeature/queryMagsFeatures";
          this.mondata = "地磁暴"
          this.disappear = true;
        } else if (flag == "质子事件") {
          this.rouapi = "/dataFeature/querySpeFeatures";
          this.mondata = "质子事件"
          this.disappear = true;
        } else if (flag == "X射线耀斑") {
          this.rouapi = "/dataFeature/queryXrayFeatures";
          this.mondata = "X射线耀斑"
          this.disappear = true;
        } else {
          this.disappear = false;
          return this.$message({
            message: "暂无数据",
          });
        }
        this.getDataSourceList();
      },
      getTime() {
        // 设置时间
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var nowTime = myYear + "-" + this.fillZero(myMonth) + "-" + this.fillZero(myToday);
        this.currentTime = nowTime;
      },
      fillZero(str) {
        // 封装补零函数
        var realNum;
        if (str < 10) {
          realNum = "0" + str;
        } else {
          realNum = str;
        }
        return realNum;
      },
     
      handleCurrentChange(currentPage) {
        // 分页设置
        this.listLoading = true;
        this.currentPage = currentPage;
        console.log(this.currentPage); //点击第几页
        this.getDataSourceList();
      },
      getDataSourceList() {
        // 发送请求获取数据
        var that = this;
        var params = {
          pageSize: that.pageSize,
          strStartTime: that.form.date1,
          strEndTime: that.form.date2,
          pageNum: that.currentPage,
        };
        console.log(params);
        post("/api/idatamanage" + this.rouapi, params)
          .then((res) => {
            console.log("res=>", res.data);
            var dataSource = res.data.data;
            console.log(dataSource);
            that.showData = dataSource.rows;
            console.log(that.showData);
            that.total = dataSource.total;
            if (that.total <= 0) {
              //alert(that.total);
              this.pageFlag = false;
            } else {
              //alert(that.total);
              this.pageFlag = true;
            }
          })
          .catch((error) => {
            // this.$message.error('保存失败');
            console.log("保存失败", error);
            this.pageFlag = false;
          })
          .finally(() => {});
      },
    },
  };
  </script>
  <style src="../../assets/css/common.css"></style>
  <style scoped>
  .el-form-item_label {
    color: #84f2ff !important;
  }
  .eventReview {
    width: 100%;
    height: 85vh;
    background: black;
    display: flex;
  }
  .b_echarts {
    width: 60%;
    height: 85vh;
  }
  .b_label {
    width: 40%;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #07598B;
    }
  .main-el-row-header {
      height: 30px;
      background-color: rgba(8, 79, 140, 0.5);
  }
  </style>